"use client";
import Navigation from "@/components/Navbar";
import { Button, Card, CardBody } from "@nextui-org/react";
import { motion } from "framer-motion";
import Image from "next/image";

export default function Home() {
  const carouselItems = [
    {
      title: "5G物联网卡解决方案",
      description: "高速稳定的5G网络连接，为智能设备提供可靠保障",
      image:
        "https://img.freepik.com/free-vector/5g-wireless-technology-background_23-2148897328.jpg",
    },
    {
      title: "全球物联网卡",
      description: "覆盖200+国家和地区，为跨境设备提供无缝连接",
      image:
        "https://img.freepik.com/free-vector/global-network-connection-background_23-2148865393.jpg",
    },
    {
      title: "行业专用物联网卡",
      description: "定制化解决方案，满足不同行业的专属需求",
      image:
        "https://img.freepik.com/free-vector/internet-things-concept-background_23-2148773392.jpg",
    },
  ];

  const fadeInUp = {
    initial: { opacity: 0, y: 60 },
    animate: { opacity: 1, y: 0 },
    transition: { duration: 0.6 },
  };

  const staggerContainer = {
    animate: {
      transition: {
        staggerChildren: 0.2,
      },
    },
  };

  const cardHover = {
    hover: {
      scale: 1.05,
      transition: {
        duration: 0.2,
      },
    },
  };

  return (
    <main className="min-h-screen">
      <Navigation />

      {/* Hero Section with Carousel */}
      <motion.section
        className="relative h-[80vh] overflow-hidden"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ duration: 1 }}
      >
        <div className="absolute inset-0">
          {carouselItems.map((item, index) => (
            <motion.div
              key={item.title}
              className="absolute inset-0"
              initial={{ opacity: 0 }}
              animate={{
                opacity: [0, 1, 1, 0],
                scale: [1, 1.1],
              }}
              transition={{
                times: [0, 0.3, 0.7, 1],
                duration: 6,
                repeat: Infinity,
                delay: index * 6,
              }}
            >
              <Image
                src={item.image}
                alt={item.title}
                fill
                className="object-cover"
                priority={index === 0}
              />
              <div className="absolute inset-0 bg-black/50" />
              <div className="absolute inset-0 flex flex-col items-center justify-center text-white">
                <motion.h2
                  className="text-5xl font-bold mb-4"
                  initial={{ y: 50, opacity: 0 }}
                  animate={{ y: 0, opacity: 1 }}
                  transition={{
                    delay: index * 6 + 0.5,
                    duration: 0.8,
                    repeat: Infinity,
                    repeatDelay: carouselItems.length * 6 - 0.8,
                  }}
                >
                  {item.title}
                </motion.h2>
                <motion.p
                  className="text-xl"
                  initial={{ y: 30, opacity: 0 }}
                  animate={{ y: 0, opacity: 1 }}
                  transition={{
                    delay: index * 6 + 0.7,
                    duration: 0.8,
                    repeat: Infinity,
                    repeatDelay: carouselItems.length * 6 - 0.8,
                  }}
                >
                  {item.description}
                </motion.p>
              </div>
            </motion.div>
          ))}
        </div>
        <div className="absolute bottom-10 left-1/2 transform -translate-x-1/2">
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button
              size="lg"
              color="primary"
              className="bg-white/20 backdrop-blur-md border-white/30 border"
            >
              了解更多
            </Button>
          </motion.div>
        </div>
      </motion.section>

      {/* Features Section */}
      <section id="features" className="py-20 bg-gray-50 px-4">
        <div className="container mx-auto">
          <motion.h2
            className="text-3xl font-bold text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            产品特点
          </motion.h2>
          <motion.div
            className="grid grid-cols-1 md:grid-cols-3 gap-8"
            variants={staggerContainer}
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
          >
            {[
              {
                title: "实时监控",
                desc: "24/7全天候设备监控，随时掌握设备状态",
              },
              {
                title: "数据分析",
                desc: "强大的数据分析能力，助您做出明智决策",
              },
              { title: "远程控制", desc: "随时随地远程操控设备，提高管理效率" },
            ].map((feature) => (
              <motion.div
                key={feature.title}
                variants={{
                  ...fadeInUp,
                  hover: cardHover.hover,
                }}
                whileHover="hover"
              >
                <Card>
                  <CardBody>
                    <h3 className="text-xl font-semibold mb-4">
                      {feature.title}
                    </h3>
                    <p>{feature.desc}</p>
                  </CardBody>
                </Card>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Solutions Section */}
      <section id="solutions" className="py-20 px-4">
        <div className="container mx-auto">
          <motion.h2
            className="text-3xl font-bold text-center mb-12"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            解决方案
          </motion.h2>
          <motion.div
            className="grid grid-cols-1 md:grid-cols-2 gap-8"
            variants={staggerContainer}
            initial="initial"
            whileInView="animate"
            viewport={{ once: true }}
          >
            {[
              {
                title: "工业物联网",
                desc: "为制造业提供智能化解决方案，提升生产效率",
              },
              {
                title: "智慧城市",
                desc: "助力城市管理智能化，提升市民生活品质",
              },
            ].map((solution) => (
              <motion.div
                key={solution.title}
                variants={{
                  ...fadeInUp,
                  hover: cardHover.hover,
                }}
                whileHover="hover"
              >
                <Card>
                  <CardBody>
                    <h3 className="text-xl font-semibold mb-4">
                      {solution.title}
                    </h3>
                    <p>{solution.desc}</p>
                  </CardBody>
                </Card>
              </motion.div>
            ))}
          </motion.div>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-20 bg-gray-50 px-4">
        <div className="container mx-auto text-center">
          <motion.h2
            className="text-3xl font-bold mb-8"
            initial={{ opacity: 0, y: 20 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6 }}
          >
            联系我们
          </motion.h2>
          <motion.p
            className="mb-8"
            initial={{ opacity: 0 }}
            whileInView={{ opacity: 1 }}
            viewport={{ once: true }}
            transition={{ delay: 0.2, duration: 0.6 }}
          >
            如果您对我们的产品感兴趣，请随时与我们联系
          </motion.p>
          <motion.div whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }}>
            <Button size="lg" color="primary">
              获取报价
            </Button>
          </motion.div>
        </div>
      </section>
    </main>
  );
}
